<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>我的应用</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name=”apple-mobile-web-app-status-bar-style” content=”default”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”/>
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link href="${s.base}/pc/css/swiper.min.css" rel="stylesheet">
    <link href="${s.base}/pc/css/weWeb.css" rel="stylesheet"/>
</head>
<style type="text/css">
    body, html {
        background: #f5f5f5;
    }
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 3px;
        background: #B9D5FF;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background: #549AFF;
        width: 16px;
        height: 6px;
        opacity: 1;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        top: -20px;
        right: 0;
        text-align: right;
    }

    .swiper-pagination {
        right: 15px;
        top: 15px;
        position: absolute;
    }

    .swiper-pagination span {
        margin-right: 4px;
    }
</style>
<body>
<#if showGuide == true>
<div class="tc"></div>
</#if>
<div style="background:#fff;">
    <div class="w1200 we-head clearfix">
        <div class="we-head-logo"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.logoPath}"></div>
        <div class="we-head-nav">
            <ul>
                <li onclick="goFistPage()">首页</li>
                <li onclick="goCaseListPage()">案例</li>
                <li onclick="goProductListPage()">应用中心</li>
                <li onclick="goAboutUsPage()">关于我们</li>
                <#if sysUser?? >
                <li onclick="goMyIndexPage()" class="checked">控制中心</li>
                </#if>
            </ul>
        </div>
        <div class="we-head-logined">
            <div class="user-updown ellipsis"><i class="cytfonts">&#xe6a2;</i></div>
            <div class="user-name ellipsis">${sysUser.name}</div>
            <div class="user-Avatar"><img src="/sysFile/showFileByObjectId?objectId=${sysUser.headLogo}"></div>
            <div class="user-txt-list" style="display:none;">
                <ul>
                    <li>个人中心</li>
                    <li>退出</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="w1200 mart15 clearfix">
    <div class="main-left">
        <div class="peo-detail">
            <!-- 三角形开始 -->
            <div class="windmill">
                <div class="circle"></div>
                <div class="square">
                    <div class="sanjiao"></div>
                    <div class="sanjiao"></div>
                    <div class="sanjiao"></div>
                </div>
            </div>
            <!-- 三角形结束 -->
            <div class="peo-detail-name ellipsis">${sysUser.name}</div>
            <div class="peo-detail-list ellipsis2">
                <span>手机号：<span>${sysUser.phone}</span></span>
                <span>应用数量：${wxApplyList?size}</span>
            </div>
            <div class="peo-detail-line">争取摘到月亮，因为即使你坠落也会落在群星之间</div>
            <div class="peo-detail-pic"><img src="${s.base}/pc/images/gzh.jpg"></div>
            <div class="peo-detail-pic-bot"></div>
        </div>
        <div class="peo-notice">
            <div class="peo-notice-left">
                <i class="cytfonts">&#xe70e;</i><span>系统公告</span>
            </div>
            <div class="peo-notice-mid">
                <marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">
                    <ul>
                        <#if sysNoticeVoList?? && (sysNoticeVoList?size>0)>
                        <#list sysNoticeVoList as p>
                        <li id="${p.id}">${p.title}</li>
                        </#list>
                        <#else>
                        <li>暂无公告</li>
                        </#if>
                    </ul>
                </marquee>
            </div>
            <div class="peo-notice-right" onclick="window.open('/web/noticeList','_self')">查看更多>></div>
        </div>
        <div class="peo-applist">
            <ul>
                <#list wxApplyList as wxApply>
                    <#if wxApply.applyUseStatus!='1'>
                <li>
                    <#if wxApply.status=='1'>
                         <div class="peo-applist-hover" style="display:none;">
                    <#else>
                         <div class="peo-applist-hover hide" style="display:none;">
                    </#if>
                        <div class="peo-applist-top ">
                            <div class="peo-applist-ewm indexID" style=""  id="tab0" data-index="0"><img src="${wxApply.ewm}"></div>
                            <div class="peo-applist-link indexID" style="display:none;" id="tab1" data-index="1">
                                <input type="text" class="copyLink" value="${baseUrl}/weChat/oauth?applyId=${wxApply.id}" readonly>
                                <button type="button" class="copyBtn">复制链接</button>
                            </div>
                            <div class="peo-applist-time indexID" style="display:none;" id="tab2" data-index="2">到期时间<br><span id="vipTime">${wxApply.useDay?datetime}</span></div>
                            <div class="peo-applist-mg indexID" style="display:none;" id="tab3" data-index="3"><button type="button" onclick="window.location.href='/index.do?applyId=${wxApply.id}'"> 点击进入管理</button></div>
                        </div>

                        <div class="peo-applist-bot" >
                            <ul  >
                                <li class="checked"><i class="cytfonts">&#xe614;</i></li>
                                <li><i class="cytfonts">&#xe608;</i></li>
                                <li><i class="cytfonts">&#xe6a4;</i></li>
                                <li><i class="cytfonts">&#xe67f;</i></li>
                            </ul>
                        </div>
                    </div>
                    <#if wxApply.status=='2'>
                    <div class="vip-endtime">
                        已到期！到期时间<br><span>${wxApply.useDay?datetime}</span>
                    </div>
                        <a class="endTime">
                            <!--到期提现-->
                            <div class="peo-applist-pic"><img src="${wxApply.coverImage}"></div>
                            <h1 class="ellipsis">${wxApply.name}</h1>
                        </a>
                        <#else>
                            <a target="_blank" href="/index.do?applyId=${wxApply.id}&useDay=${wxApply.status}">
                                <div class="peo-applist-pic"><img src="${wxApply.coverImage}"></div>
                                <h1 class="ellipsis">${wxApply.name}</h1>
                            </a>
                    </#if>

                </li>
                    </#if>
                </#list>
                <li  class="guidelines">
                    <#if showGuide == true>
                    <!--步骤一开始-->
                    <div class="guid-ctn clearfix">
                        <div class="guid-point-tep"><img src="${s.base}/pc/images/tep1.png"></div>
                        <div class="guid-point">
                            <div class="guid-point-nei">点击此处，创建你的第一个微信应用。
                                <div class="div-button-line">
                                    <button type="button" class="tgbtn">跳过</button>
                                    <button type="button" class="nextbtn">下一步</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--步骤一结束-->
                    </#if>
                    <div class="peo-applist-pic" onclick="window.open('/web/productList','_self')">
                        <img src="${s.base}/pc/images/add-app.png"></div>
                    <h1 class="ellipsis">创建微信应用</h1>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-right">
        <#list sysDictContentList as sysDictContent>
        <div class="ad-list">
            <div class="swiper-pagination"></div>
            <h1 class="ellipsis">${sysDictContent.name}</h1>
            <div class="ad-banner">
                <!-- Swiper -->
                <div class="swiper-container swiper1" >
                    <div class="swiper-wrapper">
                        <#list websiteAdvertisementList as websiteAdvertisement>
                        <#if websiteAdvertisement.type == sysDictContent.value>
                        <div class="swiper-slide" onclick="goAdvertisementUrl('${websiteAdvertisement.url}','${websiteAdvertisement.id}')">
                            <div class="ad-banner">
                                <div class="ad-pics" style="background: url(/sysFile/showFileByPath?path=${websiteAdvertisement.path}) top center no-repeat;background-size:cover;"></div>
                                <h2 class="ellipsis">${websiteAdvertisement.title}</h2>
                                <h3 class="ellipsis">${websiteAdvertisement.description}</h3>
                            </div>
                        </div>
                        </#if>
                        </#list>
                    </div>
                </div>
            </div>
        </div>
        </#list>

    </div>
</div>
</body>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/pc/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${s.base}/pc/js/swiper.min.js" type="text/x-javascript"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/pc/js/base.js" type="text/x-javascript"></script>
<script>
    layui.use(['jquery', 'dialog', 'baseutil'], function () {
        var $ = layui.jquery,
            dialog = layui.dialog,
            baseutil = layui.baseutil;

        $('.user-txt-list li').bind('click', function () {
            if ($(this).index() === 0) {
                window.open('/web/personalEdit', '_self')
            } else if ($(this).index() === 1) {
                dialog.confirm("确定要退出吗？", function () {
                    baseutil.AjaxGetMark("/webExit", "", function () {
                        window.location.href = "/web/index";
                    });
                });
            }
        });
        $(".peo-applist ul li").mouseover(function(){
            $(".peo-applist-hover").hide();
            $(this).find(".peo-applist-hover ").show();

        })
        $(".peo-applist-bot li").hover(function(){
            var index=$(this).index();
            $(".peo-applist-bot ul li").removeClass("checked");
            $(this).addClass("checked");
            $(this).parents(".peo-applist-hover").find(".indexID").hide();
            $(this).parents(".peo-applist-hover").find(".indexID").eq(index).show();

        })

       $(".copyBtn").click(function(){
           $(".copyLink").select();
           document.execCommand("copy",false,null);
           $(this).parents(".peo-applist-link").addClass("peo-applist-copy");
           setTimeout(function(){
               $(".peo-applist-link").removeClass("peo-applist-copy");
               $(this).one('click', clickHandler);
           }, 1000);
       })



        function clickHandler(){
            $(this).parents(".peo-applist-link").addClass("peo-applist-copy");
            setTimeout(function(){
                $(this).parents(".peo-applist-link").removeClass("peo-applist-copy");
                $(this).parents(".peo-applist-link").one('click', clickHandler);
            }, 1000);
        }

        // $('body').one('click', clickHandler);


        $(".peo-applist ul li .endTime").bind('click', function () {
            dialog.confirm("该应用已过期，请及时续费");
        });





        $('.peo-notice-mid ul li').bind('click', function () {
            var id = $(this).attr("id");
            if (isNotBlank(id)) {
                window.open('/web/noticeDetail?id=' + $(this).attr("id"), '_blank')
            }
        });

        //跳过
        $(".tgbtn").bind("click",function(){
            baseutil.AjaxPostMark("/sys/sysguide/addOrUpdate", {status: '2'}, function () {
                $(".tc").hide();
                $(".guidelines").removeClass("guidelines");
                $(".guid-ctn").remove();
            });
        });

        //下一步
        $(".nextbtn").bind("click",function(){
            window.location.href = "/web/productList";
        });
    });

    $(function () {
        var swiper1 = new Swiper('.swiper1', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });


        $(".we-head-nav ul li").bind("click", function () {
            $(".we-head-nav ul li").removeClass("checked");
            $(this).addClass("checked");
        });

        $(".we-head-logined").mouseover(function(){
            $(".user-txt-list").show();
            $(this).find(".user-updown").addClass("Rotate180")
        });

        $(".we-head-logined").mouseout(function(){
            $(".user-txt-list").hide();
            $(this).find(".user-updown").removeClass("Rotate180")
        });
    })
</script>
</html>